<template>
  <!-- 心理数据统计页面 -->
  <div>
    <div class="chartBox">
      <div>
        <div class="echart" ref="mychartPie" :style="myChartStyle"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    list: {
      type: Array, // 根据实际数据类型来定义
      default: null,
      require: true,
    },
  },

  data() {
    return {
      myChartStyle: { width: "100%", height: "200px" }, //图表样式
      statsObjcek: {},
      chartTitle: "",

      pieName: [],
      pieData: [],
    };
  },
  created() {},
  mounted() {
    // this.pieData[0].value = this.list.NOGDPNUMBER
    // this.pieData[0].name = '毕业离校总人数'
    // this.pieData[1].value = this.list.NOGDPNUMBER
    // this.pieData[1].name = '确定人数'
    this.pieData = this.list;
    this.$nextTick(() => {
      this.peiEcharts();
    });
  },
  methods: {
    peiEcharts() {
      console.log(this.pieName, "ddd");
      // 饼图
      const option = {
        title: {
          // 设置饼图标题，位置设为顶部居中
          top: "0%",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          appendToBody: true,
        },
        series: [
          {
            type: "pie",
            label: {
              normal: {
                show: false,
              },
            },

            data: this.pieData,
          },
        ],
      };
      this.myChart = echarts.init(this.$refs.mychartPie);
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.initEcharts {
  height: 500px;
  width: 300px;
}

#barChart {
  width: 100%;
  height: 300px;
}

.text-title {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;
}

.text-info {
  max-height: 130px;
  overflow-y: auto;
  color: #000;
}

.text-title div {
  width: 24%;

  background-color: #ebeef5;
  text-align: center;
}
</style>